import React from 'react';
import './App.css';
import SbForm from './SbForm'
import Item from './SbItem';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: 123,
        sex: 1
      }
    };

  }
  onChange = (...args) => {
    let [data, name, val] = args
    console.log(name, val)
    this.setState({
      formData: data
    })
  }
  render () {
    console.log(333)
    return (
      <div className="App">
        <SbForm
          onChange={this.onChange}
          formData={this.state.formData}
          schema={{
            name: {
              type: 'text',
              rules: [{ required: true, message: 'Please input your username!' }],
              itemProps: {
                label: '姓名',
              },
              fieldProps: {
                placeholder: '请输入姓名'
              }
            },
            biu: {
              type: 'slot',
            },
            sex: {
              type: 'select',
              itemProps: {
                label: '性别',
              },
              fieldProps: {
                placeholder: '请输入性别'
              },
              options: [
                {
                  label: '请选择',
                  value: 0
                },
                {
                  label: '男',
                  value: 1
                },
                {
                  label: '女',
                  value: 2
                }
              ]
            }
          }}>

          {/* 没有指定插槽默认在最后渲染 */}
          <Item name='effect' label='默认插入项目'>
            <input type="text" />
          </Item>

          {/* 插入到指定插槽位置 */}
          <Item name='xasdasd' slot="biu" label='额外插入项目'>
            <input type="text" />
          </Item>

          {/* 一个 */}
          {
            this.state.formData.name == '123' && <div style={{ color: 'red' }}>
              联动：姓名为123时显示
            </div>
          }
        </SbForm>
      </div >
    );
  }
}


export default App;
